<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
// 配置参数可以参考 https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html
// 使用better-scroll，先install
// 引入
import BScroll from 'better-scroll';
export default {
  // 接收使用此滚动组件的参数
  props: {
    probeType: { // 监听滑动，并派发scroll，可以获取到 scrollX,scrollY的值
      type:Number,
      default:1 // 可以配值 1、2、3
    },
    click:{ // better-scroll会组织浏览器的原生click事件，需要点击的配置为true
      type:Boolean,
      default:true
    },
    data: { // 自定义事件
      type: Array, // 监听传入better-scroll的数据变化，用来刷新better-scroll重新计算高度等
      default: null
    },
    listenScroll: { //自定义事件
      type:Boolean, // 用来better-scroll中的 on 来监听滚动事件
      default:true
    },
    scrollX:{ // 是否开启 x 轴滚动
      type:Boolean,
      default:false
    },
    scrollY:{ // 是否开启 Y 轴 滚动
      type: Boolean,
      default:true
    },
    pullup: { // 上拉加载更多 滚动结束 配合 on 监听scrollEnd事件来使用
      type:Boolean,
      default:false
    },
    // pulldown: { // 下拉刷新 滚动结束 配合 on 监听touchEnd 事件来使用
    //   type: Boolean,
    //   default: false
    // },
    beforeScroll: { // 滚动开始前
      type: Boolean,
      default:false
    },
    refreshDelay:{ // 当 data发生变化的时候，传入此参数表示，间隔多久刷新DOM，重新计算。
      type: Number,// 间隔多久调用 refresh()刷新，重新计算better-scroll。
      default: 20
    }
  },
  mounted () {
    setTimeout(()=>{
      this._initScroll();
    },20)
  },
  methods: {
    _initScroll () {
      if (!this.$refs.wrapper) {
        return;
      }
      // 初始化 better-scroll，并根据传入的参数配置
      this.scroll = new BScroll(this.$refs.wrapper,{
        probeType: this.probeType,
        scrollY: this.scrollY,
        scrollX: this.scrollY,
        click: this.click
      })
      // 是否开启监听，传递事件和数据给父组件；
      if (this.listenScroll) {
        let me = this;
        this.scroll.on('scroll',(pos) => {
          me.$emit('scroll',pos)
        })
      }
      // 上拉加载更多 去派发一个事件,加载更多
      if (this.pullup) {
        this.scroll.on('scrollEnd',() => {
          if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
            this.$emit('scrollToEnd')
          }
        })
      }
      // 下拉刷新事，派发一个 touchEnd事件
      // if (this.pulldown) {
      //   this.scroll.on('touchEnd',() => {
      //     console.log("this.pos.y",this.scroll)
      //     if (this.scroll.y >= 50) {
      //       this.$emit('touchEnd')
      //     }
      //   })
      // }
      if (this.beforeScroll) {
        this.scroll.on('beforeScrollStart', () => {
          this.$emit('beforeScroll')
        })
      }
    },
    // 配合定义 内置函数
    // 启动better-scroll，默认开始
    enable () {
      this.scroll && this.scroll.enable();
    },
    // 禁用better-scroll
    disable () {
      this.scroll && this.scroll.disable;
    },
    // 重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
    refresh () {
      this.scroll && this.scroll.refresh()
    },
    // 滚动到指定的位置
    scrollTo () {
      this.scrollTo && this.scroll.scrollTo.apply(this.scroll, arguments)
    },
    // 滚动到指定的位置
    scrollToElement () {
      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
    }
  },
  watch: { // 监听data的变化,并刷新，重新计算better-scroll,
    data () {
      setTimeout(()=>{
        this.refresh()
      },this.refreshDelay)
    }
  }
}
</script>

<style scoped>
</style>
